<template>
	<div>
		<div class="h2">学生组织管理</div>
		<div id="components-form-demo-advanced-search">
			<a-form class="ant-advanced-search-form home-form" :form="form">
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item label="名称"><a-input autocomplete="off" class="field-right" placeholder="请输入名称搜索" v-decorator="[`key`]" /></a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="类型">
							<a-select :allowClear="true" v-decorator="['typeID']" placeholder="全部" optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in TypeIDList" :key="index" :value="item.ID">{{ item.Name }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="部门">
							<a-select :allowClear="true" v-decorator="['departCode']" placeholder="全部" optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in DepartCodeList" :key="index" :value="item.Code">{{ item.Name }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="成员">
							<template>
								<a-select
									v-decorator="['memberNo']"
									showSearch
									optionFilterProp="children"
									style="width: 100%"
									:showArrow="false"
									@search="fetchmember"
									:filterOption="filterOption"
									placeholder="请输入关键字进行搜索"
									allowClear
								>
									<a-select-option v-for="(item, index) in memberList" :key="item.UserNo">{{ item.UserNo }}&nbsp;|&nbsp;{{ item.Name }}</a-select-option>
								</a-select>
							</template>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="指导老师">
							<template>
								<a-select
									v-decorator="['teacherNo']"
									showSearch
									optionFilterProp="children"
									style="width: 100%"
									:showArrow="false"
									@search="fetchteacher"
									:filterOption="filterOption"
									placeholder="请输入关键字进行搜索"
									allowClear
								>
									<a-select-option v-for="(item, index) in teacherList" :key="item.UserNo">{{ item.UserNo }}&nbsp;|&nbsp;{{ item.Name }}</a-select-option>
								</a-select>
							</template>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<a-button-group size="default" class="option">
			<a-button type="primary" @click="handleSearch">搜索</a-button>
			<a-button @click="handleReset">重置</a-button>
			<a-button type="primary" @click="addList">新增</a-button>
			<a-button type="primary" @click="exportList()">导出</a-button>
			<a-button type="danger" class="btn" @click="deleteAllList">批量删除</a-button>
		</a-button-group>
		<div>
			<el-table stripe :data="data" v-loading="loading" border :max-height="tableHeight" @selection-change="handleSelectionChange" highlight-current-row style="width: 100%;">
				<el-table-column type="selection" width="55" fixed="left"></el-table-column>
				<el-table-column type="index" label="序号" width="60" fixed="left"></el-table-column>
				<el-table-column prop="Name" label="状态/名称" min-width="260" fixed="left">
					<template slot-scope="scope">
						<a-tag :color="scope.row.IsEnable ? 'red' : 'pink'">{{ scope.row.IsEnable ? '启用' : '停用' }}</a-tag>
						<a @click="seeDetail(scope.row)">{{ scope.row.Name }}</a>
					</template>
				</el-table-column>
				<el-table-column prop="Ico" label="图标" min-width="100">
					<template slot-scope="scope">
						<img style="width:60px;" :src="scope.row.Ico" />
					</template>
				</el-table-column>
				<el-table-column prop="TypeName" label="类型" min-width="180"></el-table-column>
				<el-table-column prop="DpeartName" label="所属部门" min-width="200"></el-table-column>
				<el-table-column prop="ChairmanNo" label="学院学生组织负责人" min-width="160">
					<template slot-scope="scope">
						<div>{{ scope.row.ChairmanNo + ' / ' + scope.row.CairmanName }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="Desc" label="描述" min-width="80" show-overflow-tooltip=""></el-table-column>
				<el-table-column label="操作" width="150" fixed="right">
					<template slot-scope="scope">
						<div>
							<a-tooltip placement="top">
								<template slot="title">修改</template>
								<i class="iconfont icon-editor1" style="color: #1890FF;" @click="modifyList(scope.row, 'modify')"></i>
							</a-tooltip>
							<a-tooltip placement="top">
								<template slot="title">停用/启用</template>
								<i class="iconfont icon-kidslock" style="color: green;" @click="enableList(scope.row)"></i>
							</a-tooltip>
							<a-tooltip placement="top">
								<template slot="title">删除</template>
								<i class="iconfont icon-delete" style="color: red;" @click="deleteList(scope.row)"></i>
							</a-tooltip>
							<a-tooltip placement="top">
								<template slot="title">老师</template>
								<i class="iconfont icon-laoshi" style="color: green;" @click="seeList(scope.row, 'ClubTeacher')"></i>
							</a-tooltip>
							<!-- <oprateBtn title="年审列表" icon="icon-guanli" color="green"
								 @tap="seeList(scope.row, 'ClubClubAnnualAudit')"></oprateBtn> -->
						</div>
						<div>
							<a-tooltip placement="top">
								<template slot="title">成员</template>
								<i class="iconfont icon-chengyuan" style="color: red;" @click="seeList(scope.row, 'ClubMember')"></i>
							</a-tooltip>
							<a-tooltip placement="top">
								<template slot="title">公告</template>
								<i class="iconfont icon-gonggao" style="color: #1890FF;" @click="seeList(scope.row, 'ANoticeJoin')"></i>
							</a-tooltip>
							<a-tooltip placement="top">
								<template slot="title">活动</template>
								<i class="iconfont icon-huodong" style="color: hotpink;" @click="seeList(scope.row, 'ActivityManage')"></i>
							</a-tooltip>
							<oprateBtn title="申请加入" icon="icon-xinjianzixiang" color="blue"
								 @tap="seeList(scope.row, 'JoinClubManage')"></oprateBtn>
								 
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pagination.currentPage"
				:page-sizes="pagination.pageSizeOptions"
				:page-size="pagination.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total"
			></el-pagination>
		</div>
		<add :text="text" :DepartCodeList="DepartCodeList" :TypeIDList="TypeIDList" v-show="addIf" @closeFun="closeFun"></add>
		<clubDetail :text="text1" v-show="clubDetailShow" @closeFun="closeFun"></clubDetail>
	</div>
</template>


<script>
function getBase64(img, callback) {
	const reader = new FileReader();
	reader.addEventListener('load', () => callback(reader.result));
	reader.readAsDataURL(img);
}
import add from './add';
import clubDetail from './clubDetail';
import Func from '@/utils/func';
import Cache from '@/utils/cache';
import { getClubPageList, DeleteClub, GetUserList, EnableClub, GetClubTypeList, GetDepartList, UserDoUpdateBase64Image, UserDoSetHeadImage } from '@/api/follow';
const data = [];
export default {
	components: {
		add,
		clubDetail
	},
	data() {
		return {
			data,
			form: this.$form.createForm(this, {
				name: 'advanced_search'
			}),
			pagination: {
				currentPage: 1,
				pageSize: this.global.pageSize,
				pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
				showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
			},
			addIf: false,
			text: {},
			visible: false,
			confirmLoading: false,
			itemId: '',
			departmentList: [],
			worklist: [],
			loading: false,
			values: {},
			pages: {
				pageIndex: 2,
				pageSize: 20
			},
			tableHeight: parseFloat(window.innerHeight - 160),
			TypeIDList: [],
			DepartCodeList: [],
			fileList: [],
			clubDetailShow: false,
			text1: {},
			requestUrl: this.global.requestUrl,
			token: Cache.get('token'),
			teacherList: [],
			memberList: [],
			multipleSelection: []
		};
	},
	computed: {},
	created() {
		this.getList();
		this.getOtherList();
	},
	mounted() {},
	methods: {
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		deleteAllList() {
			if (this.multipleSelection.length == 0) {
				this.$message.error('请先选择要删除的数据！');
			} else {
				let that = this;
				this.$confirm({
					title: '提示',
					content: '确定要删除选中的数据吗？',
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let list = that.multipleSelection;
						for (let i = 0, len = list.length; i < len; i++) {
							let data = {};
							data.id = list[i].ID;
							let res = await DeleteClub(data);
						}
						that.getList();
					}
				});
			}
		},
		async fetchteacher(value) {
			// let myReg = /^[^a-zA-Z]+$/;
			if (value && value.length > 1) {
				let data = {};
				data.key = value;
				data.top = 20;
				let res = await GetUserList(data);
				this.teacherList = res.data.data;
			}
		},
		async fetchmember(value) {
			// let myReg = /^[^a-zA-Z]+$/;
			if (value && value.length > 1) {
				let data = {};
				data.key = value;
				data.top = 20;
				let res = await GetUserList(data);
				this.memberList = res.data.data;
			}
		},
		exportList() {
			this.form.validateFields((error, values) => {
				// ticket
				let hrefUrl = this.requestUrl + 'Manage/Club/DoExport?userToken=' + encodeURIComponent(this.token);
				let hrefStr = '';
				for (let key in values) {
					if (values[key]) {
						hrefStr += key + '=' + values[key] + '&';
					}
				}
				window.open(hrefUrl + '&' + hrefStr, '_blank');
			});
		},
		beforeUpload(file) {
			this.fileList = [...this.fileList, file];
		},
		async handleChange(info) {
			if (info.file.originFileObj) {
				getBase64(info.file.originFileObj, imageUrl => {
					this.imageUrl = imageUrl;
					let data = {};
					data.data = this.imageUrl.substr(22);
					Promise.resolve(UserDoUpdateBase64Image(data)).then(v => {
						let data1 = {};
						data1.headImage = v.data.url;
						Promise.resolve(UserDoSetHeadImage(data1)).then(m => {
						});
					});
				});
			} else {
				return false;
			}
		},
		handleSearch(e) {
			e.preventDefault();
			this.form.validateFields((error, values) => {
				this.pagination.currentPage = 1;
				this.values = values;
				this.getList();
			});
		},
		handleReset() {
			this.form.resetFields();
			this.values = {};
			this.getList();
		},
		handleSizeChange(val) {
			this.pagination.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.pagination.currentPage = val;
			this.getList();
		},
		async getList() {
			this.loading = true;
			let data = {};
			if (this.values) {
				data = this.values;
			}
			data.pageIndex = this.pagination.currentPage;
			data.pageSize = this.pagination.pageSize;
			let res = await getClubPageList(data);
			this.loading = false;
			this.data = res.data.data;
			const pagination = { ...this.pagination };
			pagination.total = res.data.pageInfo.TotalItemCount;
			this.pagination = pagination;
		},
		async getOtherList() {
			let res = await GetClubTypeList();
			let res2 = await GetDepartList();
			this.TypeIDList = res.data.data;
			this.DepartCodeList = res2.data.data;
		},
		addList() {
			this.text = {};
			this.addIf = !this.addIf;
		},
		modifyList(text) {
			this.text = { ...text, time: new Date() };
			this.addIf = !this.addIf;
		},
		enableList(text) {
			let that = this;
			this.$confirm({
				title: '提示',
				content: `您确定要${text.IsEnable ? '停用' : '启用'}该学生组织吗？`,
				okText: '确认',
				cancelText: '取消',
				async onOk() {
					let data = {};
					data.id = text.ID;
					let res = await EnableClub(data);
					if (res.data.code == 0) {
						that.getList();
						that.$message.success(res.data.msg);
					} else {
						that.$message.error(res.data.msg);
					}
				}
			});
		},
		deleteList(text) {
			let that = this;
			this.$confirm({
				title: '提示',
				content: `您确定删除该学生组织吗？`,
				okText: '确认',
				cancelText: '取消',
				async onOk() {
					let data = {};
					data.id = text.ID;
					let res = await DeleteClub(data);
					if (res.data.code == 0) {
						that.getList();
						that.$message.success(res.data.msg);
					} else {
						that.$message.error(res.data.msg);
					}
				}
			});
		},
		seeList(text, name) {
			this.$router.push({
				name: name,
				query: {
					ID: text.ID,
					Name: text.Name
				}
			});
		},
		seeDetail(item) {
			this.text1 = { ...item, time: new Date() };
			this.clubDetailShow = true;
		},
		closeFun(data) {
			this.addIf = false;
			this.clubDetailShow = false;
			if (data == 1) {
				this.getList();
			}
		}
	}
};
</script>

<style lang="less" scoped>
.home-form /deep/.ant-form-item {
	display: flex;
	margin-bottom: 10px !important;
}
.home-form /deep/.ant-form-item-label {
	width: 80px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
.home-form /deep/.ant-form-item-control-wrapper {
	flex: 1;
}
/deep/.el-table th.is-leaf {
	background: #fafafa;
}
/deep/.el-table td,
/deep/.el-table th {
	padding: 5px;
}
.option {
	margin-top: 0px;
	margin-bottom: 20px;
	overflow: hidden;
	.ant-btn {
		font-size: 12px;
	}
}
.foot {
	text-align: center;
	margin-top: 100px;
}
.el-pagination {
	margin-top: 10px;
}
</style>
